<script lang="ts" setup>
import { ref, computed } from "vue";
import { useStore } from "@/stores/data";
import { useRouter } from 'vue-router'
import { dialog } from '@/utils/dialog'

const router = useRouter()

const store = useStore();

const showClearIcon = ref(false)
const isView = ref(false)
const isView2 = ref(false)
const redColor = ref(false)
const saveDisabled = computed(
  () => !(store.changePassword.phone && store.changePassword.old_password && store.changePassword.new_password),
)

// 清除输入
const clearInput = (event: Event) => {
  const target = event.target as HTMLInputElement
  store.changePassword.phone = target.value
  showClearIcon.value = target.value.length > 0
}

// 清除图标点击
const clearIcon = () => {
  store.changePassword.phone = ''
  store.changePassword.old_password = ''
  store.changePassword.new_password = ''
  showClearIcon.value = false
}

// 切换密码可见性
const togglePasswordVisibility = () => {
  isView.value = !isView.value
}

// 切换确认密码可见性
const toggleConfirmPasswordVisibility = () => {
  isView2.value = !isView2.value
}

// 输入监听
const onInput = () => {
  if (store.changePassword.old_password && store.changePassword.new_password) {
    redColor.value = store.changePassword.old_password !== store.changePassword.new_password
  } else {
    redColor.value = false
  }
}

const canSend = computed(() => {
  // 可根据你项目需要补充更严谨的手机号校验
  // const phoneOk = !!store.changePassword.phone && store.changePassword.phone.trim().length >= 6;
  // return !sending.value && remain.value === 0 && phoneOk && !!store.register;
  return validatePhoneNumber(store.changePassword.phone)
});


// 验证手机号
const validatePhoneNumber = (phone: string) => {
  const regex = /^1[3456789]\d{9}$/
  return regex.test(phone)
}

// === 修改密码（你原来的调用保持不变） ===
const changePassword = async () => {
  if (!validatePhoneNumber(store.changePassword.phone)) {
    dialog.alert({ title: '手机号不正确', message: '手机号不正确，请输入正确的手机号' })
    return
  }
  if (!store.changePassword.old_password) {
    dialog.alert({ title: '旧密码不能为空', message: '旧密码不能为空，请输入旧密码' })
    return
  }

  if (!store.changePassword.new_password) {
    dialog.alert({ title: '新密码不能为空', message: '新密码不能为空，请输入新密码' })
    return
  }

  try {
    await store.changePasswordAct(
      store.changePassword.phone, 
      store.changePassword.old_password, 
      store.changePassword.new_password, 
      null
    )
  } catch (e) {
    console.log(e);
  }
};
</script>

<template>
  <div class="reset-password-page">
    <!-- 头部导航 -->
    <div class="header">
      <button class="back-button" @click="router.back()">
        <span class="back-icon">←</span>
      </button>
      <span class="header-title">修改密码</span>
    </div>
    
    <div class="main">
      <div class="content">
        <div class="item">
          <div class="item-title">手机号</div>
          <div class="input-block">
            <input 
              class="item-input" 
              type="number" 
              v-model="store.changePassword.phone" 
              placeholder="请输入手机号" 
              @input="clearInput" 
            />
            <span v-if="showClearIcon" class="clear-icon" @click="clearIcon">×</span>
          </div>
        </div>
        <div class="item">
          <div class="item-title">旧密码</div>
          <div class="input-block">
            <input
              :type="isView ? 'text' : 'password'"
              class="item-input"
              v-model="store.changePassword.old_password"
              placeholder="请输入密码"
              @input="onInput"
            />
            <div class="icon" :class="{ active: isView }" @click="togglePasswordVisibility"></div>
          </div>
        </div>

        <div class="item">
          <div class="item-title">新密码</div>
          <div class="input-block">
            <input
              :type="isView2 ? 'text' : 'password'"
              class="item-input"
              :class="{ 'error-input': redColor }"
              v-model="store.changePassword.new_password"
              placeholder="请输入密码"
              @input="onInput"
            />
            <div
              class="icon"
              :class="{ active: isView2 }"
              @click="toggleConfirmPasswordVisibility"
            ></div>
          </div>
        </div>
      </div>
      
      <div class="bottom">
        <div class="button-block">
          <button 
            class="button" 
            :disabled="saveDisabled"
            @click="changePassword"
          >
            更改密码
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.reset-password-page {
  width: 100%;
  height: 100vh;
  background: url('@/assets/images/login/bg.png') no-repeat center / cover;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  // 主内容区
  .main {
    padding: 0 20px;
    box-sizing: border-box;
    margin-top: 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 500px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    
    .content {
      background: #ffffff;
      border-radius: 20px;
      padding: 35px 25px;
      box-shadow: 0 10px 30px rgba(0, 108, 255, 0.1);
      animation: slideUp 0.5s ease;
      
      .item {
        margin-bottom: 25px;
        
        &-title {
          font-weight: 600;
          font-size: 15px;
          color: #00042d;
          margin-bottom: 12px;
          display: flex;
          align-items: center;
        }
        
        .input-block {
          display: flex;
          align-items: center;
          width: 100%;
          height: 48px;
          padding: 0 20px;
          box-sizing: border-box;
          background: #f5f6f9;
          border-radius: 24px;
          margin-bottom: 5px;
          transition: all 0.3s ease;
          border: 1px solid transparent;
          
          &:focus-within {
            border-color: #006cff;
            box-shadow: 0 0 0 2px rgba(0, 108, 255, 0.1);
            background: #fff;
          }
          
          .item-input {
            flex: 1;
            height: 100%;
            padding: 0;
            background: transparent;
            border: none;
            outline: none;
            font-size: 15px;
            color: #333;
            
            &::placeholder {
              color: #aaa;
              transition: color 0.3s ease;
            }
            
            &:focus::placeholder {
              color: #ccc;
            }
          }
          
          .clear-icon {
            margin-left: 10px;
            cursor: pointer;
            font-size: 18px;
            color: #999;
            transition: all 0.3s ease;
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;

            &:hover {
              color: #333;
              background-color: #eee;
            }
          }
          
          .get-code {
            font-weight: 500;
            font-size: 14px;
            color: #006cff;
            margin-left: 10px;
            padding: 8px 15px;
            // background: linear-gradient(90deg, rgba(0, 108, 255, 0.1) 0%, rgba(0, 159, 255, 0.1) 100%);
            background: transparent;
            border: none;
            border-radius: 16px;
            cursor: pointer;
            white-space: nowrap;
            transition: all 0.3s ease;
            
            &:hover:not(.disabled) {
              // background: linear-gradient(90deg, rgba(0, 108, 255, 0.2) 0%, rgba(0, 159, 255, 0.2) 100%);
              background: transparent;
            }
            
            &.disabled {
              color: #999;
              cursor: not-allowed;
              background: #f5f5f5;
            }
          }
          .icon {
            width: 22px;
            height: 22px;
            margin-left: 10px;
            cursor: pointer;
            background: url('@/assets/images/login/m.png') no-repeat center / contain;
            transition: transform 0.3s ease;
            
            &:hover {
              transform: scale(1.1);
            }

            &.active {
              background: url('@/assets/images/login/m1.png') no-repeat center / contain;
            }
          }
        }
      }
    }
    
    .bottom {
      margin-top: auto;
      margin-bottom: 30px;
    }
    // 按钮区域
    .button-block {
      width: 100%;
      display: flex;
      justify-content: center;
      
      .button {
        width: 100%;
        max-width: 350px;
        height: 48px;
        background: linear-gradient(90deg, #006cff 0%, #009fff 100%);
        border-radius: 24px;
        font-weight: 600;
        font-size: 16px;
        color: #ffffff;
        border: none;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(0, 108, 255, 0.3);
        
        &:hover:not(:disabled) {
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(0, 108, 255, 0.4);
        }
        
        &:active:not(:disabled) {
          transform: translateY(0);
          box-shadow: 0 2px 10px rgba(0, 108, 255, 0.3);
        }
        
        &:disabled {
          background: linear-gradient(90deg, #8cb8e8 0%, #8cc7e8 100%);
          cursor: not-allowed;
          box-shadow: none;
        }
      }
    }
  }
}


// 响应式设计
@media (max-width: 480px) {
  .reset-password-page {
    .header {
      padding: 15px;
      
      .header-title {
        font-size: 16px;
      }
    }
    
    .main {
      padding: 0 15px;
      margin-top: 20px;
      
      .content {
        padding: 25px 20px;
        
        .item {
          margin-bottom: 20px;
          
          &-title {
            font-size: 14px;
            margin-bottom: 10px;
          }
          
          .input-block {
            height: 44px;
          }
        }
      }
      
      .button-block .button {
        height: 44px;
        font-size: 15px;
      }
    }
  }
}
.error-message {
  background: rgba(222, 72, 57, 0.1);
  color: #de4839;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  animation: pulse 1.5s infinite;
  
  &::before {
    content: '!';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background-color: #de4839;
    color: white;
    border-radius: 50%;
    margin-right: 6px;
    font-weight: bold;
    font-size: 12px;
  }
}
</style>
